<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、v-show与v-if的共同点</h2>
  <div>我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示</div>
  <h2>二、v-show与v-if的区别</h2>
  <div>控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除</div>
  <br>
  <div>编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换</div>
  <br>
  <div>性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗</div>
  <h2>三、v-show与v-if原理分析</h2>
  <h4>v-show原理</h4>
  <div>不管初始条件是什么，元素总是会被渲染</div>
  <h4>v-if原理</h4>
  <div>v-if在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理,返回一个node节点，render函数通过表达式的值来决定是否生成DOM</div>
  <h2>四、v-show与v-if的使用场景</h2>
  <ul>
    <li>v-if 与 v-show 都能控制dom元素在页面的显示</li>
    <li>v-if 相比 v-show 开销更大（直接操作dom节点增加与删除）</li>
    <li>如果需要非常频繁地切换，则使用 v-show 较好</li>
    <li>如果在运行时条件很少改变，则使用 v-if 较好</li>
  </ul>
</body>
</html>